html {
  /* 设置当前网页的视距为800px，人眼距离网页的距离 */
  perspective: 800px;
}
.cube {
  width: 400px;
  height: 400px;
  margin: 150px auto;
  /* transform默认情况下是2d变形  如果想要设置3d变形效果需要设置 transform-style: preserve-3d;*/
  transform-style: preserve-3d;
  animation: rotate 3s  linear infinite;
}
.cube .box1 {
  transform: rotateY(90deg) translateZ(200px);
}
.cube .box2 {
  transform: rotateY(-90deg) translateZ(200px);
}
.cube .box3 {
  transform: rotateX(90deg) translateZ(200px);
}
.cube .box4 {
  transform: rotateX(-90deg) translateZ(200px);
}
.cube .box5 {
  transform: rotateX(0deg) translateZ(-200px);
}
.cube .box6 {
  transform: translateZ(200px) rotateY(180deg);
}
.cube > div {
  opacity: 0.8;
  position: absolute;
}
img {
  width: 400px;
  height: 400px;
  vertical-align: top;
}
@keyframes rotate {
  from {
    transform: rotateX(0) rotateZ(0);
  }
  to {
    /* turn表示转一圈 */
    transform: rotateX(1turn) rotateZ(1turn);
  }
}
